<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Data | DataSet</title>

    <style type="text/css">
      html,
      body {
        font: 11pt arial;
      }

      h1 {
        font-size: 150%;
        margin: 5px 0;
      }

      h2 {
        font-size: 100%;
        margin: 5px 0;
      }

      table.view {
        width: 100%;
      }

      table td {
        vertical-align: top;
      }

      table table {
        background-color: #f5f5f5;
        border: 1px solid #e5e5e5;
      }

      table table td {
        vertical-align: middle;
      }

      input[type="text"],
      pre {
        border: 1px solid lightgray;
      }

      pre {
        margin: 0;
        padding: 5px;
        font-size: 10pt;
      }

      #mynetwork {
        width: 100%;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script type="text/javascript">
      var nodes, edges, network;

      // convenience method to stringify a JSON object
      function toJSON(obj) {
        return JSON.stringify(obj, null, 4);
      }

      function addNode() {
        try {
          nodes.add({
            id: document.getElementById("node-id").value,
            label: document.getElementById("node-label").value,
          });
        } catch (err) {
          alert(err);
        }
      }

      function updateNode() {
        try {
          nodes.update({
            id: document.getElementById("node-id").value,
            label: document.getElementById("node-label").value,
          });
        } catch (err) {
          alert(err);
        }
      }
      function removeNode() {
        try {
          nodes.remove({ id: document.getElementById("node-id").value });
        } catch (err) {
          alert(err);
        }
      }

      function addEdge() {
        try {
          edges.add({
            id: document.getElementById("edge-id").value,
            from: document.getElementById("edge-from").value,
            to: document.getElementById("edge-to").value,
          });
        } catch (err) {
          alert(err);
        }
      }
      function updateEdge() {
        try {
          edges.update({
            id: document.getElementById("edge-id").value,
            from: document.getElementById("edge-from").value,
            to: document.getElementById("edge-to").value,
          });
        } catch (err) {
          alert(err);
        }
      }
      function removeEdge() {
        try {
          edges.remove({ id: document.getElementById("edge-id").value });
        } catch (err) {
          alert(err);
        }
      }

      function draw() {
        // create an array with nodes
        nodes = new vis.DataSet();
        nodes.on("*", function () {
          document.getElementById("nodes").innerText = JSON.stringify(
            nodes.get(),
            null,
            4,
          );
        });
        nodes.add([
          { id: "1", label: "Node 1" },
          { id: "2", label: "Node 2" },
          { id: "3", label: "Node 3" },
          { id: "4", label: "Node 4" },
          { id: "5", label: "Node 5" },
        ]);

        // create an array with edges
        edges = new vis.DataSet();
        edges.on("*", function () {
          document.getElementById("edges").innerText = JSON.stringify(
            edges.get(),
            null,
            4,
          );
        });
        edges.add([
          { id: "1", from: "1", to: "2" },
          { id: "2", from: "1", to: "3" },
          { id: "3", from: "2", to: "4" },
          { id: "4", from: "2", to: "5" },
        ]);

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {};
        network = new vis.Network(container, data, options);
      }
    </script>
  </head>

  <body onload="draw();">
    <p>
      This example demonstrates dynamically adding, updating and removing nodes
      and edges using a DataSet.
    </p>

    <h1>Adjust</h1>
    <table>
      <tr>
        <td>
          <h2>Node</h2>
          <table>
            <tr>
              <td></td>
              <td><label for="node-id">Id</label></td>
              <td><input id="node-id" type="text" value="6" /></td>
            </tr>
            <tr>
              <td></td>
              <td><label for="node-label">Label</label></td>
              <td><input id="node-label" type="text" value="Node 6" /></td>
            </tr>
            <tr>
              <td></td>
              <td>Action</td>
              <td>
                <button id="node-add" onclick="addNode();">Add</button>
                <button id="node-update" onclick="updateNode();">Update</button>
                <button id="node-remove" onclick="removeNode();">Remove</button>
              </td>
            </tr>
          </table>
        </td>
        <td>
          <h2>Edge</h2>
          <table>
            <tr>
              <td></td>
              <td><label for="edge-id">Id</label></td>
              <td><input id="edge-id" type="text" value="5" /></td>
            </tr>
            <tr>
              <td></td>
              <td><label for="edge-from">From</label></td>
              <td><input id="edge-from" type="text" value="3" /></td>
            </tr>
            <tr>
              <td></td>
              <td><label for="edge-to">To</label></td>
              <td><input id="edge-to" type="text" value="4" /></td>
            </tr>
            <tr>
              <td></td>
              <td>Action</td>
              <td>
                <button id="edge-add" onclick="addEdge();">Add</button>
                <button id="edge-update" onclick="updateEdge();">Update</button>
                <button id="edge-remove" onclick="removeEdge();">Remove</button>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    <h1>View</h1>
    <table class="view">
      <colgroup>
        <col width="25%" />
        <col width="25%" />
        <col width="50%" />
      </colgroup>
      <tr>
        <td>
          <h2>Nodes</h2>
          <pre id="nodes"></pre>
        </td>

        <td>
          <h2>Edges</h2>
          <pre id="edges"></pre>
        </td>

        <td>
          <h2>Network</h2>

          <div id="mynetwork"></div>
        </td>
      </tr>
    </table>
  </body>
</html>
